import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';

class MyCommnetsItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    }
    this.deleteComment = this.deleteComment.bind(this)
  }
  componentDidMount() {

  }
  // 过滤数据
  filter(data) {
    const reg1 = new RegExp('(<SCRIPT)[\\s\\S]*?((</SCRIPT>)|(/?>))', 'gi')
    const reg2 = new RegExp('<script>.*<\/script>', 'gi')
    return {
      // 标题
      postTitle: data.post_title,
      // 评论内容
      content: data.content.rendered.replace(reg2, '').replace(reg1, ''),
      // 评论日期
      date: data.date.substr(0, 10),
      // 作者Id
      id: data.id,
      // 评论的文章id
      postId: data.post,
    }
  }
  // 删除评论
  deleteComment(id) {
    this.props.deleteComment(id);
  }
  render() {
    const data = this.filter(this.props.data);
    return (
      <div className="my-comments-item">
        <h3 className="arc-title">
          <Link to={`article-detail/${data.postId}`}>{data.postTitle}</Link>
          <span className="time">评论时间:{data.date}</span>
          <span className="delete" onClick={() => { this.deleteComment(data.id) }}>删除</span>
        </h3>
        <p dangerouslySetInnerHTML={{ __html: data.content }} />
      </div>
    )
  }
}
export default MyCommnetsItem;
MyCommnetsItem.propTypes = {
  deleteComment: PropTypes.func,
  data: PropTypes.objectOf(Object),
}
